<!--
 * @Author: Aaron
 * @Date: 2022-02-18 10:02:44
 * @LastEditors: Aaron Huang
 * @LastEditTime: 2022-11-01 10:08:20
 * @Description: file content
 * @FilePath: \ias_ui\src\components\searchHead\searchHead.vue
 * @Company: 沃尔玛
-->
<template>
  <div class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title"> <i class="el-icon-search" />&nbsp;搜索栏 </template>
        <div class="head-container">
          <el-form class="searchform" :inline="true" size="mini" label-width="auto">
            <el-form-item v-for="(item, index) in searchList" :key="index" :label="item.label">
              <el-input
                v-if="item.type === 'input'"
                v-model.trim="searchData[item.value]"
                :placeholder="'请输入' + item.label"
                :clearable="!Boolean(item.maxlength)"
                style="width: 200px"
                :show-word-limit="Boolean(item.maxlength)"
                :maxlength="item.maxlength || null"
                @change="change(`${item.value}Change`, searchData[item.value], 'item.value')"
                @input="change(`${item.value}Input`, searchData[item.value], 'item.value')"
              />
              <el-input
                v-else-if="item.type === 'textarea'"
                v-model="searchData[item.value]"
                type="textarea"
                :placeholder="'请输入' + item.label + '，多个回车换行隔开'"
                :maxlength="item.maxlength || null"
                :show-word-limit="Boolean(item.maxlength)"
                clearable
                style="width: 200px"
                @change="change(`${item.value}Change`, searchData[item.value], 'item.value')"
                @input="change(`${item.value}Input`, searchData[item.value], 'item.value')"
              />
              <el-select
                v-else-if="item.type === 'select'"
                v-model="searchData[item.value]"
                style="width: 200px"
                :placeholder="'请选择' + item.label"
                collapse-tags
                clearable
                :multiple="Boolean(item.multiple)"
                @change="change(`${item.value}Change`, searchData[item.value], 'item.value')"
              >
                <el-option v-for="option in assertionsArray(options[item.value])" :key="option.value" :label="option.label" :value="option.value" />
              </el-select>
              <el-cascader
                v-else-if="item.type === 'cascader'"
                v-model="searchData[item.value]"
                style="width: 200px"
                :props="{ children: 'children', label: 'categoryName', expandTrigger: 'hover', value: 'categoryId' }"
                :options="assertionsArray(options[item.value])"
                separator=">"
                filterable
                clearable
                @change="change(`${item.value}Change`, searchData[item.value], 'item.value')"
              />
              <el-date-picker
                v-else-if="item.type === 'time'"
                v-model="searchData[item.value]"
                style="width: 200px"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="change(`${item.value}Change`, searchData[item.value], 'item.value')"
              />
              <BrandName v-else-if="item.type === 'brandName'" v-model="searchData[item.value]" style="width: 200px" :channel-id="item.channelId" />
            </el-form-item>
            <el-form-item label="">
              <span v-for="item in btnList" :key="item.name">
                <slot v-if="item.slot" name="item.slot" />
                <el-button v-else size="mini" type="primary" style="margin: 0 5px" :icon="item.icon" round @click="$emit(item.event)">
                  {{ item.name }}
                </el-button>
              </span>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import BrandName from '@/views/coi/components/BrandName.vue'

export default {
  name: 'SearchHead',
  components: {
    BrandName
  },
  props: {
    searchData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    btnList: {
      type: Array,
      default() {
        return [
          { name: '查询', icon: 'el-icon-search', event: 'handleSearch' },
          { name: '重置', icon: 'el-icon-refresh', event: 'handleReset' },
          { name: '导出', icon: 'el-icon-download', event: 'handleDownload' }
          // { name: '单一新增', icon: 'el-icon-circle-plus-outline', event: 'addition' }
        ]
      }
    },
    searchList: {
      type: Array,
      default() {
        return []
      }
    },
    options: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      activeName: '1'
    }
  },
  methods: {
    assertionsArray(val) {
      return Array.isArray(val) ? val : []
    },
    change(event, value) {
      this.$emit(event, value)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding-bottom: 8px;
}
</style>
